<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style type="text/css">
			#loginForm {
				background-color: lightblue;
				width: 300px;
				margin: 200px auto;
			}
		</style>
	</head>
	<body>
		<!-- 
		完整的注册登录 
		
		1.注册
		用户名 
		密码 
		重复密码 
		性别 单选框
		年龄 
		爱好 多选框
		学历 下拉框
		用户简介
		同意协议（复选）
		注册按钮 登录按钮
		-->
		<div id="app">
			<div id="registerForm" v-if="!isLogin">
				<h1 style="text-align: center;">用户注册</h1>
				<div>用户名：<input type="text" v-model="username" /></div>
				<div>密码：<input type="password" v-model="password" /></div>
				<div>重复密码：<input type="password" v-model="repassword" /></div>
				<div>
					用户性别:
					<input type="radio" v-model="gender" :value="sextual[1]" />男
					<input type="radio" v-model="gender" :value="sextual[2]" />女
				</div>
				<div>
					爱好:
					<input type="checkbox" v-model="likes" :value="habits[0]" />听音乐
					<input type="checkbox" v-model="likes" :value="habits[1]" />唱歌
					<input type="checkbox" v-model="likes" :value="habits[2]" />打游戏
					<input type="checkbox" v-model="likes" :value="habits[3]" />看电影
				</div>
				<div>
					<select v-model="work">
						<option disabled value="">请选择你的学历</option>
						<option>小学</option>
						<option>初中</option>
						<option>高中</option>
						<option>大专</option>
						<option>本科</option>
						<option>研究生</option>
					</select><br />
				</div>
				<div>用户简介<textarea name="" id="" cols="40" rows="10"></textarea></div>
				<div>
					<!-- <textarea name="" id="" cols="40" rows="10">用户协议</textarea> -->
					<input type="checkbox" v-model="agreement" :value=true />同意
				</div>
				<div><button type="button" @click="register">注册</button></div>
				<div><button type="button" @click="login">登录</button></div>
			</div>
			<div v-else>
				{{username}}已登录</br>
				<button type="button" @click="loginOut">登出</button>
			</div>
		</div>

		<script>
			var app = Vue.createApp({
				data() {
					return {
						"user": [],
						'username': '',
						'password': '',
						'repassword': '',
						'isLogin': false,
						'isRegister': false,
						"sextual": ['男', '女'],
						"habits": ['听音乐', '唱歌', '打游戏', '看电影'],
						"work":'',
						"agreement": true
					}
				},
				methods: {
					register: function() {
						console.log("register")

						// if (this.username == null) {
						// 	alert("请输入要设置的用户名")
						// } else if (this.password == null) {
						// 	alert("请输入要设置的密码")
						// } else 
						if (this.password != this.repassword) {
							alert("重复密码不一致")
						} else if (!this.agreement) {
							alert("请先同意用户协议")
						} else {
							alert("注册成功")
							this.isLogin = true
						}
					},
					login: function() {
						console.log("login")

						if ((this.username == "admin" && this.password == "123") || this.isRegister == true) {
							alert("登录成功")
							this.isLogin = true
						} else {
							alert("登录失败")
						}
					},
					loginOut: function() {
						this.isLogin = false
					}
				}
			});
			var vm = app.mount("#app")
		</script>


	</body>
</html>